<template>
	<view class="container">
		<view style="background-image: url('https://cs4.hephp.cn/images/h5/hy/Rectangle_30@3x.png');background-size: cover;background-position: center;background-repeat: no-repeat;">
			<view style="text-align: center;color: #fff;font-size: 18px;padding-top: 60px;">附近商家</view>
			<view style="overflow: hidden;display: block;height: 120px;padding-top: 20px;width: 98%;margin: 0 auto;margin-bottom: 10px;">
				<view @click="dzshow=true" style="color: #fff;text-align: center;width: 20%;float: left;font-size: 14px;height:30px;line-height: 30px;">
					<text>{{jname.name1}}</text>
					<text class="tn-icon-down-triangle"></text>
				</view>
				<view  style="width: 60%;float: left;font-size: 14px;border-radius: 3px;background: #59B9F1;height:30px;">
					<input  style="height: 30px;width: 100%;line-height: 30px;color: #fff;font-size: 26rpx;padding-left: 3px;" 
					type="text" placeholder-style="color:rgba(255, 255, 255, 0.4);" name="" placeholder="请输入关键词进行搜索" @confirm="getsearch"
						v-model="jname.searchValue">
				</view>
				<view style="width: 20%;float: left;">
					<view @click="addshop" style="width: 90%;height: 30px;diplay:black;
					border-radius: 3px;background-color: #fff;color: #00A6E9;
					font-weight: 600;text-align: center;line-height: 30px;margin-left: 3px;font-size: 13px;">加入商家</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view @click="addcid(item.id)" class="item" v-for="(item,index) in clist" :key="index">
				<image :src="item.image" style="width: 42px;height: 42px;margin-top: 5px;" class="bIcon" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<tn-tabs :list="list" :current="current" activeColor="#1678FF" :barWidth="50" @change="change"></tn-tabs>
		<view class="content">
			<view
				style="background-color: #fff;height: 600px;overflow: auto;padding: 5px;box-shadow: 3px 3px 3px 3px rgba(238, 238, 238, 0.5);width: 98%;margin: 0 auto;border-radius: 5px;margin-top: 5px;margin-bottom: 5px;">
				<slist :listall="alists"></slist>
			</view>
		</view>
		
		<tn-popup v-model="dzshow" mode="right" width="600rpx">
			<nyn :hot="true" @bindCity="bindCity"></nyn>
		</tn-popup>
		<tabbar :curls="3"></tabbar>
	</view>
</template>

<script>
	import nyn from '@/components/nyn-city-list/nyn-city-list.vue'
	import slist from '@/components/slist/slist.vue'
	import {
		getfjdplist
	} from '@/apis/shop.js'
	import {
		getcList,
		getzbList,
		gethylist,
		getcglist,
		getDetails
	} from '@/apis/hy.js'
	export default {
		components: {
			slist,
			nyn
		},
		data() {
			return {

				dzshow: false,
				tabList: [{
					name: '最新'
				}, {
					name: 'Java'
				}],
				current:0,
				list: [{
					name: '附近店铺',
				}, {
					name: '废旧金属',
				}, {
					name: '废旧物资',
				}],
				currents: 0,
				banList: [],
				jname: {
					searchValue: null, // Search Value
					name1: '全国',
					address: '',
					cid: '',
					name2: '分类',
				},
				clist: [],
				alists: [],
				jobList: [],
				winfo: '',
				news: [{
					userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
					userName: '可我会像',
					date: '2022年5月20日',
					color: 'red',
					label: ['小程序'],
					title: '全新出发，新版本已上线，欢迎三连',
					desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
					mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
					viewUser: {
						latestUserAvatar: [{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
							},
						],
						viewUserCount: 567
					},
					collectionCount: 543,
					commentCount: 543,
					likeCount: 206
				}, ],
			}
		},
		onLoad() {
			this.getcLists()
			this.getfjdplists()
			this.getdp()
		},
		methods: {
			addcid(e) {
				this.jname.cid = e
				this.getfjdplists()
			},
			bindCity(event) {
				console.log(event)
				let currents = this.currents
				this.jname.name1 = event.name
				this.dzshow = false
				if (event.name == '全国') {
					this.jname.address = ''
				} else {
					this.jname.address = event.name
				}
				this.getfjdplists()
				console.log(event)
			},
			tos(e) {
				uni.navigateTo({
					url: '/pages/tuniao/detail?id=' + e
				})
			},
			//获取附近的店铺
			getfjdplists() {
				getfjdplist(this.jname).then(res => {
					console.log(res)
					this.alists = res.data
				}).catch(error => {
					that.tool.toastTip('请稍后重试!', 'none', 1000)
				})
			},
			//获取当前店铺
			getdp() {
				let data = {
					uid: uni.getStorageSync('uid')
				}
				getDetails(data).then(res => {
					this.winfo = res.data
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			addshop() {
				let winfo = this.winfo
				if (winfo != null && winfo != '') {
					uni.navigateTo({
						url: '/pages/tuniao/shopdetail'
					})
				} else {
					uni.navigateTo({
						url: '/pages/tuniao/addshop'
					})
				}
			},
			//采购
			getcglists() {
				getcglist().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.cglist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},

			//货源
			gethylists() {
				gethylist().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.hylist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			getsearch() {
				console.log('开始搜索');
				this.getfjdplists()
			},
			getcLists() {
				getcList().then(res => {
					if (res.code == 200) {
						this.clist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			getzblists() {
				getzbList().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.zblist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},


			change(e) {
				console.log(e)
				this.current = e
			},
			//Change Tab
			changeTab(item, index) {
				this.current = index;
			},
			// Start Search
			startSearch() {
				uni.showToast({
					title: this.searchValue,
					duration: 1500,
					icon: 'none'
				})
			},
			// Click Item
			clickJobInfo(item, index) {
				uni.navigateTo({
					url: '/pagesJob/jobDetail/jobDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// Click Addjob
			addJob() {
				uni.showToast({
					title: '点击了加号',
					duration: 1500,
					icon: 'none'
				})
			}
		}
	}
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="less" scoped>
	.tatils {
		color: #fff;
	}
	/* 胶囊*/
	.tn-custom-nav-bar__back {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  display: flex;
	  justify-content: space-evenly;
	  align-items: center;
	  box-sizing: border-box;
	  background-color: rgba(0, 0, 0, 0.15);
	  border-radius: 1000rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.5);
	  color: #FFFFFF;
	  font-size: 18px;
	  
	  .icon {
	    display: block;
	    flex: 1;
	    margin: auto;
	    text-align: center;
	  }
	  
	  &:before {
	    content: " ";
	    width: 1rpx;
	    height: 110%;
	    position: absolute;
	    top: 22.5%;
	    left: 0;
	    right: 0;
	    margin: auto;
	    transform: scale(0.5);
	    transform-origin: 0 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    opacity: 0.7;
	    background-color: #FFFFFF;
	  }
	}
	.dflex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.navSerachs::input-placeholder{
		color:red;
	}
	.input-placeholder{
		font-size: 26rpx;
		color: #ffffff;
		padding-left: 3px;
	}
	.navSerachs{
		input{
			color: #fff;
			font-size: 28rpx;
			&::placeholder {
				font-size: 26rpx;
				color: #ccc;
			}
		}
	}
	
	.dflexsb() {
		.dflex();
		justify-content: space-between;
	}

	.dflexsa() {
		.dflex();
		justify-content: space-around;
	}
	.bIcon1 {
		width: 100%;
		height: 100%;
	}
	.lanb {
		color: #3C88FF;
	}
	.xf {
		position: relative;
		border-radius: 200%;
		background-color: #458acf;
		color: #fff;
		bottom: 80px;
		height: 80px;
		right: -281px;
		line-height: 80px;
		display: block;
		width: 80px;
		font-size: 16px;
		text-align: center;
		opacity: 0.8;
		/* 这里的0.5表示50%透明度 */
	}

	.ctznav {
		float: left;
		width: 48%;
		margin-left: 5px;
		background-color: #fff;
		padding: 5px;

		.ctz {
			text-align: left;
			height: 20px;

			span {
				font-size: 12px;
			}
		}
	}
	
	.container {
		height: 140vh;
		width: 100%;
		font-family: PingFangSC-Semibold, PingFang SC;
		// padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden !important;
		background: #f8f8f8;
		color: #333;

		.searchBoxs {
			height: 80rpx;
		}

		.searchBox {
			.dflexsb();
			width: 90%;
			padding: 5rpx;
			border-radius: 60px;
			margin: 0 auto;
			background: #fff;
			box-sizing: border-box;

			.inputBox {
				position: relative;
				width: 80%;
				height: 70rpx;
				border-radius: 60px;
				background: #fff;
				// border-radius: 10rpx;

				.searchIcon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 30rpx;
					top: 30%;
				}

				input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0rpx;
					border-radius: 60px;
					left: 0rpx;
					padding-left: 80rpx;
					font-size: 26rpx;
					color: #ccc;
					&::placeholder {
						font-size: 26rpx;
						color: #ffffff;
					}
				}
			}

			.searchBtn {
				padding: 16rpx 0rpx;
				box-sizing: border-box;
				background-color: #4169E1;
				min-width: 140rpx;
				.dflex();
				color: #fff;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}
		}

		.banner {
			width: 96%;
			margin: 0 auto;
			margin-top: -50px;
			box-sizing: border-box;
			border-radius: 10px;
			background: #fff;
			overflow: hidden;

			.item {
				width: 20%;
				float: left;
				.dflex();
				flex-direction: column;
				min-height: 150rpx;

				.bIcon {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					margin-top: 24rpx;
					font-size: 24rpx;
				}
			}
		}

		.content {
			height: 100%;
			overflow-y: scroll;
			padding-bottom: 400px;

			.cTop {
				.dflexsb();
				padding: 20rpx 0rpx;
				box-sizing: border-box;

				.left {
					.dflex();
					justify-content: flex-start;
					height: 80rpx;

					.item {
						width: 120rpx;
						color: #333;
						font-size: 26rpx;
						height: 80rpx;
						.dflex();
						flex-direction: column;
						background-color: transparent !important;

						.line {
							width: 30rpx;
							height: 30rpx;
							border-radius: 90%;
							border-bottom: 4rpx solid transparent;
							transition: all 0.3s linear;
						}

						&.active {
							font-size: 28rpx;
						}

						&.active .line {
							border-bottom: 4rpx solid #47cfc8;
						}
					}
				}

				.right {
					.add {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.list {
				height: 100%;
				overflow-y: scroll;
				padding-bottom: 300rpx;
				box-sizing: border-box;
			}

			.itemJob {
				padding: 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 60rpx;
				margin-bottom: 30rpx;

				.iTop {
					font-size: 26rpx;
					font-weight: bolder;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
					.dflexsb();

					.jobName {
						width: 60%;
					}

					.money {
						flex: 1;
						color: red;
						.dflex();
						justify-content: flex-end;
					}
				}

				.badge {
					.dflex();
					justify-content: flex-start;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.badgeItem {
						padding: 4rpx 14rpx;
						box-sizing: border-box;
						background: #55aaff;
						color: #fff;
						margin-right: 14rpx;
						border-radius: 12rpx;
						.dflex();
						font-size: 30rpx;
					}
				}

				.info {
					font-size: 30rpx;
					// color: #bebebe;
					margin-top: 20rpx;
					padding: 0rpx 20rpx 0rpx 0rpx;
					box-sizing: border-box;
				}

				.cInfo {
					.dflexsb();
					margin-top: 24rpx;

					.hr {
						width: 70%;
						.dflex();
						justify-content: flex-start;

						.hrHeader {
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						text {
							font-size: 24rpx;
						}
					}

					.address {
						flex: 1;
						font-size: 24rpx;
						color: #bebebe;
					}
				}
			}
		}
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			padding: 5rpx 25rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}
</style>